<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="讲师名称">
        <el-input v-model="teacherParam.name" />
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input
          v-model="teacherParam.sort"
          controls-position="right"
          min="0"
        />
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacherParam.level" clearable placeholder="请选择">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="1" label="高级讲师" />
          <el-option :value="2" label="首席讲师" />
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacherParam.career" />
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="teacherParam.intro" :rows="10" type="textarea" />
      </el-form-item>

      <!-- 讲师头像：TODO -->
        <el-form-item label="讲师头像">
        <!-- 头衔缩略图 -->
        <pan-thumb :image="teacherParam.avatar"/>
        <!-- 文件上传按钮 -->
        <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像</el-button>

        <!--
        v-show：是否显示上传组件
        :key：类似于id，如果一个页面多个图片上传控件，可以做区分
        :url：后台上传的url地址
        @close：关闭上传组件
        @crop-upload-success：上传成功后的回调-->
        <!--field="file" 后端传给前端的参数也必须是file
         public RetVal uploadFile(MultipartFile file) throws Exception{}
         这个参数就是对应这里的，否则传不过来
          -->
        <image-cropper
          v-show="imagecropperShow"
          :width="300"
          :height="300"
          :key="imagecropperKey"
          :url="BASE_API+'/oss/uploadFile'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"
        />
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="saveOrUpdateTeacher()"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import teacher from "@/api/teacher";
//导入文件上传的组件
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";
export default {
  //还必须引入组件
  components: {
    ImageCropper,PanThumb
  },
  data() {
    return {
      teacherParam: {
        id: "",
        name: "",
        sort: 0,
        level: "",
        career: "",
        intro: "",
        avatar: "",
      },
      imagecropperShow:false,
      //上传组件的id
      imagecropperKey:0,
      BASE_API:process.env.BASE_API
      
    };
  },
  methods: {

    //关闭上传弹框按钮
    close(){
      //不显示上传文件的组件
      this.imagecropperShow=false,
      //上传组件id进行变值
      this.imagecropperKey=this.imagecropperKey+1
    },

    //文件上传成功之后的方法
    cropSuccess(response){
        //1.回显头像到页面组件
        console.log(response);
        this.teacherParam.avatar=response.retUrl;
        //2.不显示上传文件的组件
        this.imagecropperShow=false,
        //3.上传组件id进行变值
          this.imagecropperKey=this.imagecropperKey+1
    },
    //添加讲师
    saveTeacher() {
      teacher.insertEduTeacher(this.teacherParam).then((response) => {
        //调用后台的数据成功后 会访问then的回调函数
        this.$message({
          message: "添加成功",
          type: "success",
        });
        // this.$router全局路由的对象 任何页面都可以调用 push(), go()等方法
        // this.$route 表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等属性
        //router:路由  route:路径 url
        //下面那句话的意思就是当我从后台请求insertEduTeacher()成功时 将页面路由到/teacher/list 这个路径取router的index.js下查看
        this.$router.push({ path: "/teacher/list" });
      });
    },

    //根据id查询讲师

    queryEduTeacherById() {
      teacher
        //this.$route.params.teacherId固定写法，根据路由中的 router/index.js path: 'edit/:teacherId' 所以最后点的是teacherId
        .queryEduTeacherById(this.$route.params.teacherId)
        .then((response) => {
          //这个赋值 是将后台返回的数据全部赋值给了teacherParam 包括Date类型的gmtCreate 和gmtModified导致后面需要传参数给后台时 后台需要对前台传过来的参数进行@DateTimeFormat处理
          this.teacherParam = response.data.teacher;
          //console.log(this.$route.params.teacherId);
        });
    },
    //修改讲师  和添加讲师的逻辑是一样的
    updateEduTeacher() {
      
      teacher.updateEduTeacher(this.teacherParam).then((response) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.$router.push({ path: "/teacher/list" });
      });
    },

    //添加或者修改数据
    saveOrUpdateTeacher() {
      //查看传给后台的参数
      // console.log(this.teacherParam);
      if (this.$route.params.teacherId) {
        this.updateEduTeacher();
      } else {
        this.saveTeacher();
      }
    },
  },
  created() {
    //因为更新和添加讲师共用的这个页面 如果没有添加这个判断条件 
    //当点击添加讲师时，他就会调用上面的这个方法queryEduTeacherById()
    //但是添加讲师时 是没有this.$route.params.teacherId的 。this.$route.params.teacherId=undefined
    //然后undefined传到后台 进行sql查询时 查询出的teacher=null,然后返回前台，所以前台就会显示什么什么字段为null的异常
    //所以前台报null,需要通过现象看本质，不能只看现象，看看后台返回的对象是啥。
    if (this.$route.params.teacherId) {
      //如果url路径中有值 才进行查询 即回显数据
      this.queryEduTeacherById();
    }
    
  },
  watch: {
    //意思是：监控地址栏
    $route(to, from) {
      //from 从哪里来 to 到哪里去
      //意思就是 一个路径【修改】到另外一个路径【添加】就会触发
      console.log(to);
      console.log(from);
      this.teacherParam = {};
    },
  },
};
</script>